<!--安全应急重大危险源点位详情展示-->
<template>
    <div class="monitorC">
        <div class="monitorC_title">
            <span>监控面板</span>
        </div>
        <div class=" monitorC_bgcBox">
            <div class="monitorC_bgcBox_line"></div>
            <div v-if="monitorData.length>0">
                <div class="monitorC_bgcBox_designation">
                    <div>点位名称：重大危险原监测</div>
                    <div>位置：{{ targetData.location }}</div>
                </div>
                <div class="monitorC_bgcBox_table">
                    <div class="monitorC_bgcBox_table_header">
                        <div style="width: 35%">监测名称</div>
                        <div style="width: 10%">监测值</div>
                        <div style="width: 20%">范围</div>
                        <div style="width: 10%">单位</div>
                        <div style="width: 25%">上报时间</div>
                    </div>
                    <div class="monitorC_bgcBox_table_subject userFlex" ref="tableContainer"
                         @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll">
                        <div class="monitorC_bgcBox_table_subject_row" v-for="(item,i) in monitorData" :key="i">
                            <div style="width: 35%">{{ item.name }}</div>
                            <div :class="getValueClass(item)" style="width: 10%">{{
                                parseFloat(item.value).toFixed(2)
                                }}
                            </div>
                            <div style="width: 20%">{{ item.down }} - {{ item.up }}</div>
                            <div style="width: 10%">{{ item.unit }}</div>
                            <div style="width: 25%">{{ item.date }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="monitorC_bgcBox_noData">
                <LoadingSpinner v-if="isLoading"/>
            </div>
        </div>
        <div class="monitorC_close" @click="$emit('showViewViedo', false, '')"></div>
    </div>
</template>

<script>
import {getElectricity} from "@/api/consumption/axios";
import {getDeviceData} from "@/api/area";
import LoadingSpinner from '@/components/loadingSpinner.vue';

export default {
    name: "detailsPage",
    props: {
        meetId: String,
    },
    components: {LoadingSpinner},
    data() {
        return {
            showMonitor: true, //显示隐藏弹窗
            monitorData: [],
            responseData: [],
            targetDeviceId: [],
            targetData: [],
            scrollSpeed: 70, // 调整滚动速度，数值越小滚动越快
            scrollInterval: null,
            isLoading: true
        }
    },
    mounted() {
        this.getHazard()
        this.startAutoScroll()
        // setTimeout(() => {
        //     this.isLoading = false;
        // }, 3000);
    },
    beforeDestroy() {
        this.stopAutoScroll(); // 组件销毁前停止滚动
    },
    computed: {
        formattedValue() {
            return parseFloat(this.item.value).toFixed(2);
        }
    },
    methods: {
        getValueClass(item) {
            if (item.up !== undefined && item.down !== undefined) {
                const numericValue = parseFloat(item.value);
                const numericUp = parseFloat(item.up);
                const numericDown = parseFloat(item.down);

                if (numericValue >= numericDown && numericValue <= numericUp) {
                    return 'value-white'; // 在范围内，显示黄色
                } else {
                    return 'value-red'; // 不在范围内，显示红色
                }
            } else {
                return 'value-white'; // 没有up和down，显示白色
            }
        },
        //安全应急点位生成
        getHazard() {
            // const now = new Date();
            // const startTime = new Date(now.getTime() - 24 * 60 * 60 * 1000); // 24 hours ago
            let params = {
                // 'isMine': 2,
                // 'start': 0,
                // 'count':100,
                // 'startTime': this.formatDateTime(startTime),
                // 'endTime': this.formatDateTime(now),
                'deviceId': this.meetId,
            }
            getElectricity(params).then(res => {
                this.monitorData = res.value
                this.monitorData.forEach(item => {
                    // 去除小数
                    if (item.up) {
                        item.up = Number(item.up).toFixed(0)
                    }

                    if (item.down) {
                        item.down = Number(item.down).toFixed(0)
                    }
                })
                this.isLoading = false;
                // this.targetDeviceId = res.value.value[0].iocId
                this.getShe()
                console.log(this.monitorData, '安全应急点位生成')
            })
        },
        getShe() {
            getDeviceData().then(res => {
                this.responseData = res.data.data
                this.targetData = this.responseData.find(item => item.deviceId === this.meetId);
                console.log(res, '安全应急点位生成')
            })
        },
        stopAutoScroll() {
            clearInterval(this.scrollInterval);
        },
        startAutoScroll() {
            this.stopAutoScroll(); // 首先停止任何现有的滚动
            const container = this.$refs.tableContainer;
            const contentHeight = container.scrollHeight;
            let scrollTop = 0;
            const scroll = () => {
                scrollTop += 1;
                if (scrollTop >= contentHeight) {
                    scrollTop = 0;
                }
                container.scrollTop = scrollTop;
            };
            this.scrollInterval = setInterval(scroll, this.scrollSpeed);
        },
    }
}
</script>

<style lang="scss" scoped>
.value-yellow {
  color: yellow;
}

.value-red {
  color: red;
}

.value-white {
  color: white;
}

.monitorC {
  position: relative;
  width: 662px;
  height: 440px;
  display: flex;
  overflow: hidden;
  background-size: 100% 100%;
  background-image: url("@/assets/news/bg_news.png");
  flex-direction: column;

  .ws-player {
    width: 95%;
    height: 82%;
    margin-left: 2.5%;
    margin-top: 1.5%;
  }

  &_bgcBox {
    width: 600px;
    height: 350px;
    margin: 0 auto;

    &_noData {
      width: 600px;
      height: 320px;
      text-align: center;
      line-height: 320px;
      font-size: 15px;
      color: #999;
    }

    &_line {
      width: 600px;
      height: 1px;
      background-color: #467eb9;
      margin: 10px 0;
    }

    &_designation {
      width: 600px;
      height: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #FFFFFF;

      margin: 0 auto;
      line-height: 30px;

      &_online {
        width: 50px;
        height: 28px;
        text-align: center;
        line-height: 30px;
        color: #d8d83d;
        border: 1px solid #d8d83d;
        border-radius: 4px;
      }
    }

    &_table {
      width: 600px;
      height: 320px;
      font-size: 13px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #FFFFFF;

      &_header {
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        background: rgba(98, 183, 255, 0.2);
        text-align: center;
        margin: 10px 0;
      }

      &_subject {
        width: 100%;
        height: 260px;
        font-size: 12px;
        font-family: Source Han Sans SC;
        text-align: center;

        &_row {
          width: 100%;
          height: 30px;
          text-align: center;
          display: flex;
          justify-content: space-between;
          line-height: 15px;
        }

      }
    }

  }

  &_title {
    margin-left: 22px;
    width: 216px;
    height: 24px;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_title1.png");

    span {
      height: 24px;
      font-size: 13px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #FFFFFF;
      margin-left: 11px;
      line-height: 24px;
      background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }


  &_close {
    position: absolute;
    right: 20px;
    cursor: pointer;
    top: 30px;
    width: 23px;
    height: 22px;
    background-size: 100% 100%;
    background-image: url("@/assets/news/icon_closenews.png");
  }

  .videoStyle {
    position: absolute;
    margin-top: 20px;
    width: 560px;
    height: 260px;
    margin-top: 60px;
    margin-left: 50px;
    max-height: 300px;
  }
}

.userFlex {
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

</style>